<!--
  TodoListItem.vue - 待办事项单项组件
  
  这是一个展示单个待办事项的组件
  功能：
  1. 显示待办事项的文本内容
  2. 提供删除按钮
  3. 通过事件向父组件通信
  
  设计模式：
  - 接收props数据（单向数据流）
  - 通过$emit发送事件（向上通信）
  - 无状态组件（纯展示组件）
-->

<template>
    <!-- 
      使用li元素渲染列表项
      这样可以保持语义化的HTML结构
    -->
    <li>
        <!-- 
          显示待办事项的文本内容
          使用插值语法{{}}绑定数据
          todo.text来自父组件传递的props
        -->
        {{ todo.text }}
        
        <!-- 
          删除按钮
          @click是v-on:click的简写
          $emit('remove', todo.id)向父组件发送remove事件，并传递todo的id
          这是Vue中子组件向父组件通信的标准方式
        -->
        <button @click="$emit('remove', todo.id)">X</button>
    </li>
</template>

<script>
/**
 * TodoListItem组件脚本部分
 * 
 * 这是一个纯展示组件（Presentational Component）
 * 特点：
 * 1. 只负责UI渲染，不包含业务逻辑
 * 2. 数据完全来自props
 * 3. 通过事件与父组件通信
 * 4. 可复用性强
 */

export default {
    // 组件名称
    name: 'TodoListItem',
    
    // 组件属性定义
    props: {
        // todo属性 - 接收待办事项对象
        todo: {
            type: Object, // 数据类型为对象
            required: true, // 必需属性，父组件必须传递
            
            // todo对象的预期结构：
            // {
            //   id: Number, // 唯一标识符
            //   text: String // 待办事项文本
            // }
        },
    },
    
    // 注意：这个组件没有定义data、methods、computed等选项
    // 因为它是一个纯展示组件，所有的数据都来自props
    // 所有的交互都通过事件向父组件传递
    
    // 组件通信说明：
    // 1. 父组件通过props向下传递数据（todo对象）
    // 2. 子组件通过$emit向上发送事件（remove事件）
    // 3. 父组件监听子组件的事件并处理相应逻辑
};
</script>

<!-- 
  注意：这个组件没有定义样式部分
  样式可能在父组件或全局样式中定义
  如果需要组件特定的样式，可以添加<style>标签
-->

<!-- 
  可以添加的样式示例：
  <style lang="scss" scoped>
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    
    button {
      background: #ff4757;
      color: white;
      border: none;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      cursor: pointer;
      
      &:hover {
        background: #ff3838;
      }
    }
  }
  </style>
-->
